<template>
  <div class="layout">
    <Layout style="height: 100%">
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <Menu :active-name="active" theme="dark" width="auto" :class="menuitemClasses">
          <MenuItem name="home" to="/">
            <Icon type="ios-navigate" />
            <span>导航管理</span>
          </MenuItem>
          <MenuItem name="post" to="/post">
            <Icon type="ios-paper"></Icon>
            <span>文章管理</span>
          </MenuItem>
          <MenuItem name="category" to="/category">
            <Icon type="ios-folder"></Icon>
            <span>分类管理</span>
          </MenuItem>
          <MenuItem name="tag" to="/tag">
            <Icon type="ios-pricetag"></Icon>
            <span>标签管理</span>
          </MenuItem>
          <MenuItem name="comment" to="/comment">
            <Icon type="ios-chatboxes"></Icon>
            <span>评论管理</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{padding: 0}" class="layout-header-bar">
          <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
          <div class="profile" style="position: absolute; right: 1rem; top: 50%; margin-top: -2rem">
            <Avatar icon="ios-person"/>
            <Dropdown @on-click="logout" style="margin-left: 1.2rem">
              <span v-if="account">
                <span v-text="account.username">Administrator</span>
                <Icon type="ios-arrow-down" class="ml-2"></Icon>
              </span>
              <DropdownMenu slot="list">
                <DropdownItem>退出登录</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </Header>
        <Content class="main" :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
          <slot/>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import { Layout, Sider, Menu, MenuItem, Icon, Header, Content, Avatar, Dropdown, DropdownMenu, DropdownItem } from 'view-design'
import token from '../utils/token'

export default {
  components: {
    Layout, Sider, Menu, MenuItem, Icon, Header, Content, Avatar, Dropdown, DropdownMenu, DropdownItem
  },
  data () {
    return {
      isCollapsed: false
    }
  },
  computed: {
    active () {
      return this.$store.getters.active
    },
    account () {
      return this.$store.getters.account
    },
    rotateIcon () {
      return [
        'menu-icon',
        this.isCollapsed ? 'rotate-icon' : ''
      ]
    },
    menuitemClasses () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  methods: {
    collapsedSider () {
      this.$refs.side1.toggleCollapse()
    },
    logout () {
      // 采用JWT, 直接销毁Cookie
      // this.$request.get('/api/logout').then(() => {
      this.$store.dispatch('logout')
      token.remove()
      this.$router.replace('/login')
      // })
    }
  }
}
</script>

<style scoped>
  .layout{
    height: 100%;
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-header-bar{
    position: relative;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }
  .menu-icon{
    transition: all .3s;
  }
  .rotate-icon{
    transform: rotate(-90deg);
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
  }
  .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
  .main {
    border-radius: .25rem;
    padding: 1rem;
  }
</style>
